<template>
    <div>
       <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home/index' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>导演管理</el-breadcrumb-item>
            <el-breadcrumb-item>导演列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>
        <el-form @submit.native.prevent :inline="true" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input placeholder="请输入姓名关键字" v-model="name" @keyup.native.enter="search"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <el-divider content-position="left">导演列表</el-divider>
    <!-- 呈现演员列表 -->
    <person v-for="item in directors" :key="item.id" :name="item.director_name" :avatar="item.director_avatar" @del="deleteActor(item.id)"></person>
    </div>
</template>

<script>
import Person from '@/components/Person.vue'
import myaxios from '@/http/MyAxios.js'
import httpApi from '@/http/index.js'
    export default {
    components: {
        Person
    },
    data() {
      return {
        directors: [], // 存储演员列表
        name:'',  // 双向绑定name值
      }
    },
    // 组件挂载后执行
    mounted(){
      this.init()  // 初始化数据
    },
    methods:{
      deleteActor(id){
       this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        httpApi.directorApi.deleter({id}).then(res=>{
          if(res.data.code==200){
            this.search()
          }
        })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      // 通过关键字 模糊查询列表数据
       search(){
        if(this.name.trim()){ // 如果有关键字 trim去除模糊查询时前面后面中间的字符空格
          let params={name:this.name}
         httpApi.directorApi.queryByNameLike(params).then(res=>{
              console.log('模糊查询演员列表',res)
            this.directors=res.data.data
         })
        }else{
          this.init() //如果没有关键字
        }
       
       },
      //初始化数据
           init(){
       httpApi.directorApi.queryAllDirectors().then(res=>{
          console.log('加载演员列表',res)
          this.directors=res.data.data
        })
      }
    }
    };
</script>

<style lang="scss" scoped>

</style>